<template>
  <div class="app-container limit-box">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="6" :md="6" :lg="4">
        <!-- 分类数据 -->
        <Tree ref="tree" :sortTree="sortTree" :isHeight="isHeight" :loading="loading" :isOperation="isOperation"
          @nodeClick="nodeClick(arguments)" :searchName="searchName" />
      </el-col>
      <!-- 搜索数据 -->
      <el-col :span="20" :xs="24">
        <el-form :inline="true" label-width="68px" style="margin-bottom: 15px;" v-hasPermi="['wm:limit:query']">
          <el-form-item label="物料编码">
            <el-input v-model="searchForm.searchCode" clearable  size="small" style="width: 240px" />
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="searchForm.searchName" clearable size="small" style="width: 240px" />
          </el-form-item>
          <el-form-item>
            <el-button v-hasPermi="['wm:limit:query']" type="primary" icon="el-icon-search" @click="search">搜索
            </el-button>
            <el-button v-hasPermi="['wm:limit:query']" icon="el-icon-refresh" @click="serchReset()">重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8 operation-btn">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-menu" size="mini" @click="checkleAll">查询所有</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain size="mini" @click="handleRecovery('low')">低于下限</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain size="mini" @click="handleRecovery('high')">高于上限</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" v-hasPermi="['wm:limit:export']"  plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>

          </el-col>
          <el-col :span="1.5">
            <el-button type="success" v-hasPermi="['wm:limit:print']"  plain icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
          </el-col>
        </el-row>
        <!-- 打印数据 -->
        <PrintPage :printData="printData" ref="startPrint" :title="printName" />
        <!-- 物料数据 -->
        <el-form ref="formInput" :model="formInput" :rules="rules">
          <el-table v-loading="limitLoading" :data="formInput.basicfileList" border :height="maxHeight">
            <el-table-column type="index" width="60" align="center" label="序号">
            </el-table-column>
            <el-table-column label="物料编码" align="center" sortable prop="code">
              <template slot-scope="scope">
                <span style="cursor: pointer;" @click.stop="seeMaterial(scope.row)">{{scope.row.code}}</span>
              </template>
            </el-table-column>
            <el-table-column label="物料名称" align="center" prop="name" sortable>
              <template slot-scope="scope">
                <span style="cursor: pointer;" @click.stop="seeMaterial(scope.row)">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column label="型号规格" align="center" prop="attribute" width="150" />
            <el-table-column label="计量单位" align="center" prop="unitName" width="150" />
            <el-table-column label="现存量" align="center" prop="quantity">
              <template slot-scope="scope">
                <div style="text-align: right;">
                  <span>{{scope.row.quantity}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="可用量" align="center" prop="available">
              <template slot-scope="scope">
                <div style="text-align: right;">
                  <span>{{scope.row.available}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="安全上限" align="center" prop="upperLimit" width="150">
              <template slot-scope="scope">
                <el-form-item class="sec-box" :class="{'is-error':scope.row.borderStatus&&upadtateIndex==scope.$index}" :prop=" 'basicfileList.' + scope.$index + '.upperLimit' "
                  :rules='rules.upperLimit'>
                  <el-input  :disabled="upadtateIndex!==scope.$index" v-model="scope.row.upperLimit"
                    style="text-align: right;" @input="formatDecimal(scope.$index,scope.row)">
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="安全下限" align="center" prop="lowerLimit" width="150">
              <template slot-scope="scope">
                <el-form-item class="sec-box" :class="{'is-error':scope.row.borderStatus&&upadtateIndex==scope.$index}" :prop=" 'basicfileList.' + scope.$index + '.lowerLimit' "
                  :rules='rules.lowerLimit'>
                  <el-input  :disabled="upadtateIndex!==scope.$index" v-model="scope.row.lowerLimit"
                    style="text-align: right;" @input="formatDecimal(scope.$index,scope.row)">
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding" width="130">
              <template slot-scope="scope">
                <div class="public-btn">
                  <el-button size="mini" type="text" v-hasPermi="['wm:limit:view']"  class="basic-see" @click.stop="seeMaterial(scope.row)">查看
                  </el-button>
                  <el-button size="mini" type="text" v-hasPermi="['wm:limit:edit']"  @click.stop="handleSlect(scope.$index,scope.row)">编辑
                  </el-button>
                  <el-button size="mini" type="text" v-hasPermi="['wm:limit:edit']"  :disabled="!scope.row.light" class="basic-update"
                    @click.stop="handleUpdate(scope.$index,scope.row)">保存
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
    </el-row>
    <!-- 分类查询分页信息 -->
    <pagination v-show="total>=19" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getLimitList" />
    <!-- 新增/查看/修改物料弹框信息 -->
    <el-dialog title="物料信息" :visible.sync="open" width="600px" v-if="open">
      <el-form ref="materialForm" :model="materialForm.items" label-width="80px" size="medium"
        :validate-on-rule-change="false" disabled>
        <el-row>
          <el-col :span="24">
            <el-form-item label="分类信息" prop="value">
              <el-cascader v-model="value" :options="sortTree" ref="classTree" :props="classProps" class="cas-input">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料编码">
              <el-input v-model="materialForm.items.code" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间">
              <el-input v-model="materialForm.items.updateTime" class="updata-time"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料名称" prop="name">
              <el-input v-model="materialForm.items.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="packingForm">
              <el-input v-model="materialForm.items.unitName"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="型号规格" prop="attribute">
              <el-input v-model="materialForm.items.attribute"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 物料数量表单 -->
      <div class="from-mount">
        <p class="mount-title">总量</p>
        <el-form :model="materialForm.items" label-width="100px" size="medium" class="mount-form" disabled>
          <el-row>
            <el-col :span="12">
              <el-form-item label="当前库存数量" class="txt-right">
                <el-input v-model="materialForm.items.quantity" class="now-stock"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际可用数量" class="txt-right">
                <el-input v-model="materialForm.items.available" class="now-actual"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划锁定数量">
                <el-input v-model="materialForm.items.mp" class="txt-right"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销售锁定数量">
                <el-input v-model="materialForm.items.om" class="txt-right"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购在途数量">
                <el-input v-model="materialForm.items.po" class="txt-right"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产在途数量" class="txt-right">
                <el-input v-model="materialForm.items.prs"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="委外在途数量" class="txt-right">
                <el-input v-model="materialForm.items.pu"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="from-mount"  v-for="(item,index) in materialForm.wm" :key="index">
        <p class="mount-title">{{item.whName}}</p>
        <el-form :model="materialMount" label-width="100px" size="medium" class="mount-form" disabled>
          <el-row>
            <el-col :span="12">
              <el-form-item label="当前库存数量" class="txt-right">
                <el-input v-model="item.quantity" class="now-stock"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际可用数量" class="txt-right">
                <el-input v-model="item.available" class="now-actual"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划锁定数量">
                <el-input v-model="item.mp" class="txt-right"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销售锁定数量">
                <el-input v-model="item.om" class="txt-right"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购在途数量">
                <el-input v-model="item.po" class="txt-right"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产在途数量" class="txt-right">
                <el-input v-model="item.prs"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="委外在途数量" class="txt-right">
                <el-input v-model="item.pu"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listSort,
  } from "../../api/sort"; //分类接口
  import {
    listLimit, //安全量列表
    updateLimit, //更新安全量
    seeMaterial, //物料汇总
    listPacking, //计量单位
    exportLimit, //导出物料
    listWarehouses, //仓库列表
    detailedMaterial //物料明细
  } from "../../api/limit"; //物料接口
  import {
    getTreeData,
    getEcho,
  } from "../../utils/limit" //js方法
  //输入是否为数字效验
  import {
    isAccord
  } from "@/utils/cingsoft"
  import Tree from "../../components/Sort/tree"; //分类组件
  import PrintPage from "../../components/Limit/print"; //打印组件
  import print from "print-js"; //打印js
  import {
    supParent
  } from "../../utils/sort.js" //打印获取分类名称
  export default {
    name: "Limit", //现存量
    data() {
      return {
        // 遮罩层
        loading: true,
        //安全量遮罩层
        limitLoading: true,
        //分类搜索名称
        searchName: "",
        // 批量删除按钮状态
        multiple: true,
        //是否显示分类操作按钮
        isOperation: true,
        //树形数据
        sortTree: [],
        //树形选中是否高亮
        isHeight: true,
        //物料数据最大高度
        maxHeight: null,
        //搜索参数
        searchForm: {
          searchName: "", //搜索物料名称
          searchCode: "", //搜索物料编码
        },
        //更新列
        upadtateIndex: "",
        // 料品查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100,
          sortId: "",
          invName: "",
          invCode: "",
          lowerLimit: "",
          upperLimit: ""
        },

        // 总条数
        total: 0,
        //小数位数
        decimal: "4",
        //物料数据
        formInput: {
          basicfileList: []
        },
        // 新增/修改/编辑弹框状态
        open: false,
        //选择分类回显信息
        value: [],
        //表单禁用状态
        seeStatus: false,
        //分类选择配置
        classProps: {
          children: "children",
          label: "sortName",
          value: "sortCode",
          checkStrictly: true
        },
        packingDate: [],
        // 计量单位
        packingForm: "",
        // 物料查看信息表单
        materialForm: {
          items: {},
          wm: [],
        },
        //打印分类名称
        printName: "",
        printSortName:"",
        printLimitName:"",
        //打印数据
        printData: [],
        //物料查看数量表单
        materialMount: {
          items: {},
          wm: [],
        },
        rules: {

        }
      }

    },
    created() {
      //初始化分类数据
      this.getTreeList();
      //初始化物料数据
      this.getLimitList();
      //隐藏操作按钮
      this.isOperation = false;
    },
    methods: {
      //获取分类数据
      getTreeList() {
        this.loading = true,
          listSort({
            feature: ""
          }).then(res => {
            this.sortTree = getTreeData(res.data); //当children为0时，赋值undefined
            this.loading = false;
          });
      },

      // 获取分类物料数据
      getLimitList() {
        this.limitLoading = true;
        listLimit(this.queryParams).then(res => {
          let arrBasic = JSON.parse(JSON.stringify(res.rows));
          //数量格式化4位小说
          arrBasic.forEach(value => {
            if (value.quantity !== null) {
               value.quantity = value.quantity.toFixed(this.decimal);
            }
          if (value.available !== null) {
                value.available = value.available.toFixed(this.decimal);
            }
           
            if (value.lowerLimit !== null) {
              value.lowerLimit = value.lowerLimit.toFixed(this.decimal);
            }
            if (value.upperLimit !== null) {
              value.upperLimit = value.upperLimit.toFixed(this.decimal);
            }
            value.borderStatus = false;
          })
          this.formInput.basicfileList = arrBasic;
          this.total = res.total;
          if (this.formInput.basicfileList.length >= 19) { //条数总数大于显示出现滚动条
            this.maxHeight = (`${document.documentElement.clientHeight}` - 270);
          } else {
            this.maxHeight = ""
          }
          this.limitLoading = false;
        })
      },

      //搜索物料
      search() {
        if (this.searchForm.searchName == "" && this.searchForm.searchCode == "") {
          this.msgError("物料编码或物料名称不能同时为空！");
        } else {
          this.queryParams.invName = this.searchForm.searchName; //赋值物料名称
          this.queryParams.invCode = this.searchForm.searchCode; //赋值物料编码
          this.queryParams.sortId = ""; //避免当分类树点击时页面缓存的sortId导致搜索失败
          this.getLimitList();
        }
      },

      //获取计量单位数据
      getPacking() {
        return new Promise((resolve, reject) => {
          listPacking().then(res => {
            if (res.code == 200) {
              this.packingDate = res.rows;
              resolve()
            }
          }).catch(err => {
            this.msgError("获取计量单位失败！");
          })
        })

      },

      //物料分类点击获取
      nodeClick(node) {
        // 获取上级分类名称
        const name = [];
        const getParentName = supParent(node[1], name).reverse(); //获取上级分类名称
        console.log(getParentName)
        this.packingForm = node[0].unitCode; //获取默认计量单位
        if (this.packingForm !== "") {
          this.handlePacking(node[0].unitCode); //得到单位编码与名称字段
        }
      let parentName = getParentName.join(" / "); //拼接上级分类名称
        if (node[1].data.parentId == 0) {
            this.printSortName = node[1].data.sortName;
        } else {
           this.printSortName = parentName + " / " + node[1].data.sortName + "-";
        }
        this.undataAddSee(node[0].sortId).then(() => {
          this.isHeight = true; //打开分类树高亮
          this.queryParams.sortId = node[0].sortId; //赋值sortId用于搜索
          this.getLimitList(); //重新拉取数据
        })
      },

      //选择计量单位
      handlePacking(value) {
        if (this.packingDate.length > 0) {
          let obj = {};
          obj = this.packingDate.find((item) => {
            return item.code === value;
          });
          this.materialForm.items.unitCode = obj.code; //计量单位编码
          this.materialForm.items.unitName = obj.name; //计量单位名称
        }
      },

      // 查询所有
      checkleAll() {
        //清空搜索信息，避免干扰
        this.searchForm.searchName = "";
        this.searchForm.searchCode = "";
        this.queryParams.sortId = "";
        this.queryParams.invName = "";
        this.queryParams.invCode = "";
        this.queryParams.lowerLimit = "";
        this.queryParams.upperLimit = "";
        this.printSortName = "",
         this.printLimitName = "",
        this.printName = "";
        this.isHeight = false; //关闭分类树高亮
        this.decimal = "4";
        this.getLimitList();
      },

      //低于下限高于上限
      handleRecovery(type) {
        this.searchForm.searchName = "";
        this.searchForm.searchCode = "";
        this.queryParams.invName = "";
        this.queryParams.invCode = "";
        if (type == 'low') {
          this.queryParams.lowerLimit = 1;
          this.printLimitName = "低于下限";
          this.queryParams.upperLimit = "";
          this.getLimitList()
        } else {
          this.queryParams.upperLimit = 1;
          this.printLimitName = "高于上限";
          this.queryParams.lowerLimit = "";
          this.getLimitList()
        }
      },

      //安全量导出
      handleExport() {
        let queryParams = this.queryParams,title="";
        if(queryParams.upperLimit==1){
          title = "高于上限"
        }else if(queryParams.lowerLimit==1){
          title = "低于下限"
        }else{
          title = "安全库存"
        }

        this.$confirm(`是否确认导出${title}物料数据项?`, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportLimit(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
      },

      // 打印
      handlePrint() {
        let number = 1;
        this.printName = this.printSortName + this.printLimitName;
        this.printData = this.formInput.basicfileList;
        this.printData.forEach(obj => {
          obj.id = number++
        })
        setTimeout(() => {
          this.$print(this.$refs.startPrint.$refs.print);
        }, 0)
      },

      // 分类选择回显结果
      handleChange(value) {
        value = value.join(""); //转换成字符串，用于传值后台
        this.materialForm.items.code = value;
        this.materialForm.items.sortId = this.$refs['classTree'].getCheckedNodes()[0].data.sortId; //赋值sortId
      },

      //查看物料
      seeMaterial(row) {
        this.getPacking().then(() => { //确保已获取计量单位成功
          this.undataAddSee(row.sortId).then(() => {
            this.materialForm.wm = [];
            seeMaterial({
              invCode: row.code
            }).then(res => {
              if (res.code == 200) {
                let items = JSON.parse(JSON.stringify(res.data.items))
                // items.mp = items.mp.toFixed(this.decimal);
                // items.om = items.om.toFixed(this.decimal);
                // items.po = items.po.toFixed(this.decimal);
                // items.prs = items.prs.toFixed(this.decimal);
                // items.quantity = items.quantity.toFixed(this.decimal);
                // items.available = items.available.toFixed(this.decimal);
                // items.pu = items.pu.toFixed(this.decimal);
                this.materialForm.items = items; //拷贝物料信息
                // 数量小数位格式化
                if (res.data.wm.length > 0) {
                  let basicMount = JSON.parse(JSON.stringify(res.data.wm));
                  console.log(basicMount)
                  // basicMount.forEach(obj => {
                  //   obj.mp = obj.mp.toFixed(this.decimal);
                  //   obj.om = obj.om.toFixed(this.decimal);
                  //   obj.po = obj.po.toFixed(this.decimal);
                  //   obj.prs = obj.prs.toFixed(this.decimal);
                  //   obj.quantity = obj.quantity.toFixed(this.decimal);
                  //   obj.available = obj.available.toFixed(this.decimal);
                  //   obj.pu = obj.pu.toFixed(this.decimal);
                  // })
                  this.materialForm.wm = basicMount;
                  console.log(this.materialForm)
                }
                this.open = true;
                this.packingForm = row.unitCode;
              }
            })
          })
        })
      },

      //选择编辑行
      handleSlect(index, data) {
        data.borderStatus = true;
        this.upadtateIndex = index;
      },

      //保存按钮高亮
      formatDecimal(index, data) {
        if ((isAccord(data.upperLimit) && data.upperLimit > 0) || (isAccord(data.lowerLimit) && data.lowerLimit > 0)) {
          this.upadtateIndex = index;
          data.light = true;

        } else {
          data.light = false;
        }
      },

      //保存
      handleUpdate(index, data) {
        this.$refs['formInput'].validate((valid) => {
          if (valid) {
            updateLimit(data).then(res => { //触发保存提交
              if (res.code == 200) {
                 this.formInput.basicfileList[index].version = res.data[0].version;
                if (res.data[0].lowerLimit !== null) {
                  this.formInput.basicfileList[index].lowerLimit = (res.data[0].lowerLimit).toFixed(this
                    .decimal);
                }
                if (res.data[0].upperLimit !== null) {
                  this.formInput.basicfileList[index].upperLimit = (res.data[0].upperLimit).toFixed(this
                    .decimal);
                }

                this.upadtateIndex = "";
                data.light = false;
                   data.borderStatus = false;
                this.msgSuccess("保存成功")
              }
            }).catch(err => {
              this.msgError("保存失败");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      // 新增/修改/查看公共获取分类回显
      undataAddSee(id) {
        return new Promise((resolve, reject) => {
          let parentArr = [], //用于储存父类分类信息
            childrenArr = []; ////用于储存子类分类信息
          getEcho(id, this.sortTree, parentArr, childrenArr).then((res) => {
            setTimeout(() => {
                let success = [];
            for (let i = 0; i < res.length; i++) {
              if (success.indexOf(res[i]) === -1) {
                success.push(res[i]);
              }
            }
            let getNode = JSON.parse(JSON.stringify(success)); //拷贝vuex信息，避免影响源数据
              getNode.forEach(v => {
                if (v.ancestors.indexOf(",") > -1) { //是否是子分类
                  v.ancestors = v.ancestors.split(",").length; //拼接数组长度，用于排序
                } else {
                  v.ancestors = 1;
                }
              })
              getNode.sort((a, b) => { //排序得到正常的分类顺序，用于得到sortCode
                return a.ancestors - b.ancestors
              })
              let getCode = [];
              getNode.forEach(code => {
                getCode.push(code.sortCode);
                this.materialForm.items.sortId = code.sortId;
              })

              this.value = getCode; //对话框分类回显
              this.decimal = getNode[0].quantityDigit;
            }, 0)
          });
          resolve()
        })

      },
      //搜索表单重置
      serchReset() {
        for (let key in this.searchForm) {
          this.searchForm[key] = ""
        }
      },
    },

    components: {
      Tree,
      PrintPage
    },

  };
</script>
<style lang="scss">
  .limit-box {
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      color: #1890FF;
    }

    .public-btn .is-disabled span {
      opacity: .5;
    }
    .height-tree{
      height: calc(100vh - 220px);
    }
    .el-form-item.is-error .el-input__inner,
    .el-form-item.is-error .el-input__inner:focus,
    .el-form-item.is-error .el-textarea__inner,
    .el-form-item.is-error .el-textarea__inner:focus {
      border: 1px solid #1890ff;
    }

    .el-table--medium th,
    .el-table--medium td {
      padding: 0 !important;
    }

    .el-table_1_column_8 {
      .cell {
        padding-right: 0 !important;
        padding-left: 0 !important;
      }
    }

    .el-table_1_column_9 {
      .cell {
        padding-right: 0 !important;
        padding-left: 0 !important;
      }
    }

    .el-form-item--medium .el-form-item__content {
      line-height: 30px;
    }

    .sec-box {
      margin-bottom: 0;
      line-height: 30px;

      .el-form-item__content {
        margin-right: 0px !important;
      }

      .el-input__inner {
        height: 31px;
        line-height: 0;
        color: #606266;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        text-align: right;
        padding-right: 15px;
      }
    }

    .el-select {
      input {
        line-height: 28px;
        height: 28px;
        width: 150px;
      }
    }

    .txt-right {
      input {
        text-align: right;
      }
    }

    .el-dialog__body {
      max-height: calc(100vh - 200px);
      overflow-y: auto;
    }

    .detailed-box {
      .el-dialog__body {
        padding-bottom: 30px;
      }
    }

    .mount-title {
      font-size: 15px;
      font-weight: 700;
      margin: 0;
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 15px;
      margin-bottom: 15px;
    }

    .el-input--medium .el-input__icon {
      line-height: 28px;
    }

    .operation-btn {
      .is-disabled {
        span {
          font-weight: 700;
        }
      }


    }

    .el-table--medium th,
    .el-table--medium td {
      overflow: inherit;
    }

    .el-table th>.cell {
      overflow: inherit;
      position: relative;
    }

    .caret-wrapper {
      position: absolute;
      right: 64px;
      top: -5px;
      display: none;
    }

    .el-button--info.is-plain.is-disabled {
      color: #adaeaf;
    }

    .cas-input input {
      color: #1890FF !important;
    }

    .keep-status {
      margin-top: 15px;
    }

    .updata-time {
      input {
        border: none;
      }
    }

    .el-cascader .el-input .el-input__inner {
      color: #1890ff;
    }

    .el-input--suffix input {
      color: #606266;
    }

    .el-cascader--medium {
      width: 100%;
    }

    .has-gutter th {
      text-align: center;
      overflow: inherit;
    }




    .el-dialog__body {
      padding-right: 20px;
      padding-bottom: 20px;

    }

    .now-stock {
      input {
        color: #1890FF !important;
      }
    }

    .now-actual input {
      color: #13CE66 !important;
    }

    .el-input.is-disabled .el-input__inner {
      color: #333;
    }

    .el-form-item--medium .el-form-item__content {
      margin-right: 10px;
    }

    .cell {
      padding-right: 14px !important;
      padding-left: 14px !important;

      .basic-delete {
        color: #f56c6c;
      }


      .basic-see {
        color: #67c23a;
      }

      button:hover i {
        font-weight: 700;
      }

      button:hover span {
        font-weight: 700;
      }
    }

    .from-mount {
      padding: 15px;
      box-shadow: 1px 1px 10px 1px #eee;
      border-radius: 5px;
      padding-bottom: 10px;
      margin: 10px 10px 0px 10px;

      h3 {
        font-weight: normal;
        font-size: 15px;
        margin-top: 0;
        text-align: center;
        color: #1890ff;
      }
    }

    .foot-bot {
      text-align: inherit !important;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .foot-star {
        color: #1682e6;

        label {
          font-weight: normal;
          font-size: 12px;
        }
      }

    }
  }
</style>
